<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渠道活码数据详情</title>
    <!-- elementUI css -->
    <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
    <link rel="stylesheet" href="/css/public.css">
    <style type="text/css">
        html {
            min-width: 900px;
        }
        
        body {
            background: #f0f2f5;
            margin: 0;
            padding: 0;
        }
        /*渠道活码 顶部start*/
        .ChannellsStatistics_selectList_container{
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .ChannellsStatistics_selectList_container span{
            font-size: 14px;
            font-weight: 400;
            color: rgba(0,0,0,.65);
        }
        .ChannellsStatistics_selectList_content{
            height: 32px;
            background: #fff;
            border-radius: 2px;
            border: 1px solid #dcdfe6;
            display: flex;
            align-items: center;
            padding: 0 12px;
            width: 176px;
            overflow: hidden;
            cursor: pointer;
        }
        .ChannellsStatistics_selectList_content ul{
            display: flex;
            align-items: center;
            flex: 1;
            overflow: hidden;
            height: 32px;
            white-space: nowrap;
            margin-right: 5px;
        }
        .ChannellsStatistics_selectList_content ul li{
            font-size: 14px;
            font-weight: 400;
            color: rgba(0,0,0,.65);
            height: 32px;
            line-height: 32px;
            display: inline;
        }
        .ChannellsStatistics_selectList_content svg{
            width: 11px;
            height: 11px;
        }
        /*渠道活码 顶部end*/
        .radardetail_dataDetail_content {
            padding: 19px 24px;
            margin: 16px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05);
        }
        
        .radardetail_dataDetail_list {
            background: #fbfdff;
            border: 1px solid #daedff;
            display: flex;
            max-width: 750px;
        }
        
        .radardetail_dataDetail_list li {
            flex: 1;
            margin: 31px 0;
            border-right: 1px solid #e9e9e9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .radardetail_dataDetail_list li:last-child {
            border-right: none;
        }
        
        .radardetail_dataDetail_list li b {
            font-size: 24px;
            font-weight: 500;
            color: #000;
            line-height: 33px;
            margin-bottom: 5px;
        }
        
        .radardetail_dataDetail_list li span {
            font-size: 13px;
            font-weight: 400;
            color: rgba(0, 0, 0, .65);
            line-height: 18px;
        }
        
        .customerData_title_container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .customerData_title_container h2 {
            font-size: 17px;
            color: #333;
            font-weight: 700;
        }
        
        .customerData_publicLabel_container {
            font-size: 14px;
            color: #606266;
        }
        
        .trend_setting_content {
            display: flex;
            align-items: center;
        }
        
        .trend_settingDate_container {
            margin-left: 20px;
            display: flex;
            align-items: center;
        }
        
        .trend_settingSelectPeople_container {
            margin-left: 20px;
            display: flex;
            align-items: center;
        }
        
        .trend_setting_container {
            margin: 20px 0;
        }
        [v-cloak] {
        	display: none; 
        }
        /*弹窗部分 start*/
        .radardetail_dataDetail_content .el-dialog__body{
            padding-top: 0;
            padding-bottom: 15px;
        }
        .dialog_channelCode_container{
            height: 350px;
        }
        .dialog_channelCode_content{
            display: flex;
            height: calc(100% - 40px);
        }
        .dialog_channelCode_Left_container{
            flex:1;
            border-right: 1px solid #ececec;
            padding-right: 20px;
            height: 100%;
        }
        .dialog_channelCode_Right_container{
            flex:1;
            padding-left: 20px;
            height: 100%;
        }
        .dialog_channelCode_LeftList_container{
            padding: 0 5px 0px 5px;
            height: calc(100% - 42px);
            overflow-x: hidden;
            overflow-y: auto;
            margin-top: 10px;
        }
        .dialog_scrollbar_container::-webkit-scrollbar{
          width:5px;
          height:10px;
          /**/
        }
        .dialog_scrollbar_container::-webkit-scrollbar-track{
          background: rgb(239, 239, 239);
          border-radius:2px;
        }
        .dialog_scrollbar_container::-webkit-scrollbar-thumb{
          background: #bfbfbf;
          border-radius:10px;
        }
        .dialog_scrollbar_container::-webkit-scrollbar-thumb:hover{
          background: #333;
        }
        .dialog_scrollbar_container::-webkit-scrollbar-corner{
          background: #179a16;
        }
        .dialog_channelCode_LeftList_container li{
            display: flex;
            align-items: center;
            padding-bottom: 10px;
        }
        .dialog_channelCode_LeftList_container li:last-child{
            padding-bottom: 0;
        }
        .dialog_channelCode_LeftList_container li span{
            font-size: 14px;
            font-weight: 400;
            color: rgba(0,0,0,.85);
            line-height: 20px;
            flex:1;
        }
        .dialog_channelCode_LeftList_container li input{
            cursor: pointer;
        }
        .dialog_channelCode_Right_container h3{
            font-size: 14px;
            font-weight: 400;
            color: rgba(0,0,0,.85);
            line-height: 22px;
            font-weight: 400;
        }
        .dialog_channelCode_RightList_container{
            margin-top: 10px;
            padding: 0 5px 0px 5px;
            height: calc(100% - 32px);
            overflow-x: hidden;
            overflow-y: auto;
        }
        .dialog_channelCode_RightList_container li{
            display: flex;
            align-items: center;
            padding-bottom: 10px;
        }
        .dialog_channelCode_RightList_container li:last-child{
            padding-bottom: 0;
        }
        .dialog_channelCode_RightList_container li span{
            font-size: 14px;
            font-weight: 400;
            color: rgba(0,0,0,.85);
            line-height: 20px;
            flex: 1
        }
        .dialog_channelCode_RightList_container li i{
            cursor: pointer;
        }

        /*弹窗部分 end*/
    </style>

</head>

<body>
    <div id="app">
        <!-- 头数据部分 -->
        <div class="radardetail_dataDetail_content" v-loading.fullscreen.lock="fullscreenLoading">
            <div class="ChannellsStatistics_selectList_container" >
                <span>渠道码：</span>
                <div class="ChannellsStatistics_selectList_content" @click="dialogTableVisible = true" v-cloak>
                    <ul>
                        <li v-for="(item,index) in contact_way_list" :key="item.state" v-if="item.ischeck == true">!{!{item.name}}、</li>
                    </ul>
                    <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg>
                </div>
            </div>
            <!-- 弹窗 start -->
            <el-dialog title="全部渠道码" :visible.sync="dialogTableVisible" width="665px" v-cloak>
              <div class="dialog_channelCode_container">
                  <div class="dialog_channelCode_content">
                      <div class="dialog_channelCode_Left_container">
                        <el-input size="small" placeholder="请完整输入渠道码名称" v-model="searchChannelCode" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="searchChannelCodeFun"></el-button>
                        </el-input>
                        <ul class="dialog_channelCode_LeftList_container dialog_scrollbar_container">
                            <li v-for="item in contact_way_list" :key="item.state" v-if="searchChannelCode!=''?item.name == searchChannelCode:true">
                                <span>!{!{item.name}}</span>
                                <input type="checkbox" :value="item.name" v-model="item.ischeck" @change="checkboxChange">
                            </li>
                        </ul>
                      </div>
                      <div class="dialog_channelCode_Right_container">
                          <h3>已选择分组和渠道码</h3>
                          <ul class="dialog_channelCode_RightList_container dialog_scrollbar_container">
                              <li v-for="(item,index) in contact_way_list" :key="item.state" v-if="item.ischeck == true">
                                  <span>!{!{item.name}}</span>
                                  <i class="el-icon-close" :data-index="index" @click="item.ischeck = false"></i>
                              </li>
                          </ul>
                      </div>
                  </div>
                  <el-row justify="end" type="flex" style="padding-top: 8px;">
                    <el-button size="small" @click="dialogTableVisible = false">取消</el-button>
                    <el-button size="small" type="primary" @click="submitChannelCodeFun">确定</el-button>
                  </el-row>
              </div>
            </el-dialog>
            <!--   弹窗 end -->
            <ul class="radardetail_dataDetail_list" v-cloak>
                <li>
                    <b>!{!{peocount.today_num}}</b>
                    <span>今天总添加人数</span>
                </li>
                <li>
                    <b>!{!{peocount.today_delnum}}</b>
                    <span>今日总流失人数</span>
                </li>
                <li>
                    <b>!{!{peocount.total_num}}</b>
                    <span>总添加人数</span>
                </li>
                <li>
                    <b>!{!{peocount.total_delnum}}</b>
                    <span>总流失人数</span>
                </li>
            </ul>
        </div>
        <!-- 趋势图头部 -->
        <div class="radardetail_dataDetail_content">
            <div class="customerData_title_container">
                <h2>图表数据</h2>
            </div>
            <div class="trend_header_container" style="margin-bottom: 10px;">
                <div class="trend_settingSelectType_container">
                    <el-radio-group v-model="ChartType" size="medium" @change="ChartTypeClickFun">
                        <el-radio-button label="totalNum">总添加人数</el-radio-button>
                        <el-radio-button label="todayNew">当天新增人数</el-radio-button>
                        <el-radio-button label="totayDel">当天流失人数</el-radio-button>
                    </el-radio-group>
                </div>

                <div class="trend_setting_container">
                    <div class="trend_setting_content">
                        <div class="trend_settingSelectDate_container" style="width: 100px;">
                            <el-select v-model="timeType" size="small" @change="timeTypeFun">
                                <el-option label="昨日" value="day"></el-option>
                                <el-option label="近一周" value="week"></el-option>
                                <el-option label="近一个月" value="month"></el-option>
                            </el-select>
                        </div>
                        <div class="trend_settingDate_container">
                            <label class="customerData_publicLabel_container">自定义：</label>
                            <el-date-picker v-model="Date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 220px;" @change="DateTypeFun">
                            </el-date-picker>
                        </div>
                        <div class="trend_settingSelectPeople_container">
                            <label class="customerData_publicLabel_container">请选择员工：</label>
                            <el-select v-model="personnel" filterable placeholder="请选择客服" size="small" style="width: 215px;" @change="selectPeopleFun">
                                <el-option v-for="item in personnels" :key="item.id" :label="item.name" :value="item.user_id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <!-- 折线图 -->
                <div class="trend_charts_container">
                    <div id="main" style="width: 100%;height:400px;"></div>
                </div>

            </div>
            <div class="customerData_title_container">
                <h2>图表数据</h2>
            </div>
            <div class="trend_settingSelectType_container" style="margin-bottom: 20px;">
                <el-radio-group v-model="TableType" size="medium" @change="TableTypeFun">
                    <el-radio-button label="date">按日期查看</el-radio-button>
                    <el-radio-button label="users">按员工查看</el-radio-button>
                </el-radio-group>
            </div>

            <el-table :data="dateTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" v-if="TableType == 'date'">
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column prop="total_num" label="客户总数" width="180"></el-table-column>
                <el-table-column prop="day_new" label="新增人数"></el-table-column>
                <el-table-column prop="day_del" label="流失人数"></el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="dateTableData.length" v-if="TableType == 'date'"></el-pagination>

            <el-table :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" v-if="TableType == 'users'">
                <el-table-column prop="name" label="员工名称" width="180"></el-table-column>
                <el-table-column prop="total_num" label="客户总数" width="180"></el-table-column>
                <el-table-column prop="day_new" label="新增人数"></el-table-column>
                <el-table-column prop="day_del" label="流失人数"></el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="userTableData.length" v-if="TableType == 'users'"></el-pagination>

        </div>

    </div>
    </div>
    </div>
    <script src="/unpkg/unpkg.vue.js"></script>
    <script src="/cdn/qs.min6.js"></script>
    <script src="/unpkg/lib-master/index.js"></script>
    <script src="/unpkg/unpkg.axios.min.js"></script>
    <script src="/cdn/echarts.min.js"></script>
    <script type="text/javascript">
        // const echarts = require('echarts');
        var myapp = new Vue({
            el: '#app',
            data() {
                return {
                    fullscreenLoading: false, //loading全屏动画参数
                    ChartType: 'totalNum', //趋势图切换类型
                    timeType: 'week', //时间类型
                    starDate: '',
                    endDate: '',
                    personnel: '', //选择员工的参数
                    Date: '', //自定义日期
                    TableType: 'date', //表格类型数据
                    userTableData: [], //员工表格参数
                    dateTableData: [], //日期表格参数
                    peocount: {}, //昨日数据
                    personnels: {}, //员工列表
                    currentPage: 1, //初始页
                    pagesize: 10, //    每页的数据
                    // 渠道码
                    dialogTableVisible: false,//弹窗数据
                    searchChannelCode:'',//渠道码搜索框
                    contact_way_list:[],//渠道码左侧加载列表
                    channelCodeSelectList:[],//渠道码选中的列表
                    state:"",
                };
            },
            mounted() {
                this.openFullScreen1();
                this.contact_way_listFun();
                // this.statisoneFun();
                // this.statisticsFun();
                // this.$nextTick(() => {
                // 	this.drawChartLine();
                // 	this.drawChartBar();
                // });
            },
            methods: {
            	// 改变渠道码选中状态
            	// changeCheckFun:function(e){
            	// 	console.log(e.target.dataset.index)
            	// 	this.contact_way_list[e.target.dataset.index].ischeck = false;
            	// },
            	// 提交选择的渠道码
            	submitChannelCodeFun:function(e){
                    let t = this;
                    t.openFullScreen1();
            		let ChannelCodeList =  this.contact_way_list.filter((res)=>{
            			return res.ischeck === true
            		})
            		ChannelCodeList = ChannelCodeList.map(item => item.state)
                    t.state = ChannelCodeList;
                    console.log(ChannelCodeList);
                    this.statisoneFun(ChannelCodeList);
                    this.statisticsFun(ChannelCodeList);
            		this.dialogTableVisible = false;
            	},
            	// 选择渠道活码
                checkboxChange:function(e){
                    // let ChannelCodeList =  this.contact_way_list.filter((res)=>{
                    //     return res.ischeck === true
                    // })
                    // ChannelCodeList = ChannelCodeList.map(item => item.state)
                    // console.log(ChannelCodeList);
                    // this.statisoneFun(ChannelCodeList);
                },
                // 趋势图切换类型
                ChartTypeClickFun: function(res) {
                    let t = this;
                    t.openFullScreen1();
                    console.log(t.ChartType);
                    t.statisticsFun();
                },
                // 昨日 近一周 近一月 切换
                timeTypeFun: function(res) {
                    let t = this;
                    t.openFullScreen1();
                    console.log(t.timeType);
                    t.starDate = "";
                    t.starDate = "";
                    t.Date = "";
                    t.statisticsFun();
                },
                // 自定义日期切换
                DateTypeFun: function(res) {
                    let t = this;
                    t.openFullScreen1();
                    if (res != null) {
                        console.log(t.switchDateFun(t.Date[0]));
                        console.log(t.switchDateFun(t.Date[1]));
                        t.timeType = '自定义';
                        t.starDate = t.switchDateFun(t.Date[0]);
                        t.endDate = t.switchDateFun(t.Date[1]);
                        t.statisticsFun();
                    }
                },
                // 选择员工
                selectPeopleFun: function(res) {
                    console.log(res);
                    let t = this;
                    t.openFullScreen1();
                    this.personnel = res;
                    console.log(this.personnel);
                    t.statisticsFun();
                },
                // 切换表格类型
                TableTypeFun: function(res) {
                    console.log(res);
                    let t = this;
                    t.openFullScreen1();
                    t.TableType = res;
                    t.currentPage = 1;
                    t.pagesize = 10;
                    t.statisticsFun();
                },
                // 渠道活码列表
                contact_way_listFun:function(){
                	let t = this;
                    let requestData = {};
                    axios.post('contact_way_list.html', {
                        params: Qs.stringify(requestData)
                    }, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                			t.contact_way_list = res.data.data;
                			console.log(t.contact_way_list);
                            let ChannelCodeList =  res.data.data.filter((res)=>{
                                return res.ischeck === true
                            })
                            ChannelCodeList = ChannelCodeList.map(item => item.state);
                            console.log(ChannelCodeList);
                            t.state = JSON.parse(JSON.stringify(ChannelCodeList));
                            // 请求统计数据和人工数据
                            t.statisoneFun(ChannelCodeList)
                            t.statisticsFun(ChannelCodeList);
                    	}else if(res.data.status == "error"){
                    		console.log(res.data.msg);
                    		t.$message({
                    			message: res.data.msg,
                    			type: 'error',
                    			showClose: true,
                    			center: true
                    		});
                    	}
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 请求昨日联系客户数据
                statisoneFun: function(state) {
                    let t = this;
                    let requestData = {
                        "state":state?state:''
                    };
                    console.log(requestData)
                    axios.post('get_contact_way_peocount.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(res)
                        if(res.data.status == "success"){
                			t.personnels = JSON.parse(JSON.stringify(res.data.data.users));
                			t.peocount = res.data.data.peocount;
                    	}else if(res.data.status == "error"){
                    		console.log(res.data.msg);
                    		t.$message({
                    			message: res.data.msg,
                    			type: 'error',
                    			showClose: true,
                    			center: true
                    		});
                    	}
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 折线图数据
                statisticsFun: function(state) {
                    console.log('---------------------------')
                    console.log(state)
                    let t = this;
                    let requestData = {
                        'state': state?state:JSON.parse(JSON.stringify(t.state)),
                        'dateType': t.starDate ? 'custom' : t.timeType,
                        'users': t.personnel,
                        'startDate': t.starDate,
                        'endDate': t.endDate,
                        'etStatisticType': t.ChartType,
                        'mode': t.TableType,
                    };
                    axios.post('get_contact_way_etstatistic.html', Qs.stringify(requestData), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }, ).then(function(res) {
                        console.log(requestData);
                		console.log(res)
                		if(res.data.status == "success"){
                			if (t.TableType == "date") {
                				t.dateTableData = res.data.data.date_statistic;
                			} else if (t.TableType == "users") {
                				t.userTableData = res.data.data.users_statistic;
                			}
                			t.drawChartLine(res.data.data.linedata);
                    		// t.yesterday = res.data.data;
                    	}else if(res.data.status == "error"){
                    		console.log(res.data.msg);
                    		t.$message({
                    			message: res.data.msg,
                    			type: 'error',
                    			showClose: true,
                    			center: true
                    		});
                    	}
                    }).catch(function(res) {
                        console.log(res);
                    }).finally(function(res) {
                        t.fullscreenLoading = false;
                    });
                },
                // 折线图
                drawChartLine(ChartLine) {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById("main"));
                    let listener = function() {
                        myChart.resize()
                    }
                    window.addEventListener('resize', listener)
                        // 指定图表的配置项和数据
                    let option = {
                        title: {},
                        tooltip: {
                            trigger: 'axis'
                        },
                        color: ["#5b8ff9"],
                        legend: {
                            data: ['新增客户数', '成员发起好友申请数', '被客户删除拉黑数']
                        },
                        grid: {
                            top: '3%',
                            left: '2%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ChartLine.date,
                        },
                        yAxis: {
                            type: 'value',
                        },
                        series: [{
                            type: 'line',
                            stack: '总量',
                            data: ChartLine.number,
                            smooth: true,
                        }, ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                openFullScreen1() {
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    }, 2000);
                },
                // 转换日期格式
                switchDateFun: function(date) {
                    var nowdate = new Date(date).toLocaleDateString().replace(/\//g, '-')
                    return nowdate
                },
                // 初始页currentPage、初始每页数据数pagesize和数据data
                handleSizeChange: function(size) {
                    this.pagesize = size;
                    console.log(this.pagesize) //每页下拉显示数据
                },
                handleCurrentChange: function(currentPage) {
                    this.currentPage = currentPage;
                    console.log(this.currentPage) //点击第几页
                },
                // 渠道码部分
                // 搜索渠道码
                searchChannelCodeFun:function(){
                    console.log(this.searchChannelCode);
                }
            },

        })
    </script>
</body>

</html>